<template>
  <div>
    <h1>App</h1>

    <ul>
      <li>
        <a href="#/users/a">UsersA</a>
      </li>
      <li>
        <a href="#/users/b">UsesrB</a>
      </li>
      <li>
        <a href="#/a/b/c/d">UsesrB->/a/b/c/d</a>
      </li>
      <li>
        <a href="#/users/c">UsersC</a>
        <!-- <a href="#/a/b/c/d">UsersC</a> -->
      </li>
    </ul>

    <button @click="path = 'UsersA'">UsersA</button>
    <button @click="path = 'UsersB'">UsersB</button>
    <button @click="path = 'UsersC'">UsersC</button>
    <component :is="path"></component>
  </div>
</template>
<script>
// http://127.0.0.1:8088/index.html#hash
import UsersA from './components/UsersA.vue'
import UsersB from './components/UsersB.vue'
import UsersC from './components/UsersC.vue'
export default {
  components: {
    UsersA,
    UsersB,
    UsersC,
  },

  data() {
    return {
      path: 'UsersA',
      routes: { //路由表
        '/users/a': 'UsersA',
        // http://127.0.0.1:8088/index.html#/users/b
        '/users/b': 'UsersB',
        // http://127.0.0.1:8088/index.html#/a/b/c/d
        '/a/b/c/d': 'UsersB',
        '/users/c': 'UsersC',
      }
    }
  },
  mounted() {
    // 监听事件
    window.onhashchange = () => {
      // console.log('onhashchange');
      // 获取hash
      // console.log(window.location.hash.slice(1));
      const hash = window.location.hash.slice(1);

      // console.log(this.routes[hash]);
      this.path = this.routes[hash];
    }

  }

}
</script>

<style>
div {
  padding: 10px;
  margin: 10px;
  border: solid;
}
</style>